<template>
	<div class="ahome span-blu" style="background-color: #fff;">
		<div class="daichuli">
			<p><span></span>待处理</p>
			<div class="chuli-dingdan">
				<div>
					<span><img src="../../assets/1.png" width="40" alt=""></span>
					<div>
						<span>待收货订单</span>
						<p>8515</p>
					</div>
				</div>
				<div>
					<span><img src="../../assets/2.png" width="40" alt=""></span>
					<div>
						<span>待处理退款</span>
						<p>5543</p>
					</div>
				</div>
				<div>
					<span><img src="../../assets/3.png" width="40" alt=""></span>
					<div>
						<span>待收货订单</span>
						<p>8515</p>
					</div>
				</div>
				<div>
					<span><img src="../../assets/4.png" width="40" alt=""></span>
					<div>
						<span>待处理退款</span>
						<p>5543</p>
					</div>
				</div>
			</div>
		</div>
		<div class="ahomg-center span-blu">
			<div class="xiaoshou">
				<p><span></span>销售总览</p>
				<div>
					<span>
						<p>2065</p>
						<p>今日订单</p>
					</span>
					<span>
						<p>56211</p>
						<p>今日销售总额(元)</p>
					</span>
				</div>
			</div>
			<div class="xiaoshou">
				<p><span></span>活动总览</p>
				<div>
					<span>
						<p>2065</p>
						<p>今日订单</p>
					</span>
					<span>
						<p>56211</p>
						<p>今日销售总额(元)</p>
					</span>
				</div>
			</div>
		</div>
		<div class="span-blu ahomg-bottom">
			<div class="shangpin">
				<p><span></span>商品总览</p>
				<div>
					<div>
						<span>2129</span>
						<p>已下架</p>
					</div>
					<div>
						<span>52146</span>
						<p>已上架</p>
					</div>
					<div>
						<span>23</span>
						<p>活动商品</p>
					</div>
					<div>
						<span>99999</span>
						<p>全部商品</p>
					</div>
				</div>
			</div>
			<div class="shangpin">
				<p><span></span>用户总览</p>
				<div>
					<div>
						<span>25</span>
						<p>今日新增</p>
					</div>
					<div>
						<span>568</span>
						<p>昨日新增</p>
					</div>
					<div>
						<span>5462</span>
						<p>本月新增</p>
					</div>
					<div>
						<span>16</span>
						<p>用户天数</p>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>
<style>
	.ahomg-bottom .shangpin>div {
		display: flex;
		justify-content: space-around;
		align-items: center;
		height: 130px;
		font-size: 13px;
		color: #666;
		background-color: #EAEDF4;
		border-radius: 5px;
		margin-top: 15px;
		text-align: center;
	}
.ahomg-bottom .shangpin>div span{
	font-size: 33px;
	color: #333;
	
}
	.ahomg-bottom {
		display: flex;
		margin-top: 20px;
		justify-content: space-between;
		align-items: center;
	}

	.ahomg-bottom>div {
		width: 48%;
	}

	.ahomg-center {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.ahomg-center .xiaoshou {
		width: 48%;
	}

	.ahomg-center .xiaoshou>div {
		margin-top: 10px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		text-align: left;
	}

	.ahomg-center .xiaoshou>div>span {
		box-sizing: border-box;
		width: 48%;
		height: 120px;
		padding-left: 85px;
		padding-top: 10px;
		color: #fff;
		font-size: 13px;
		background: url(../../assets/5.png) no-repeat center/100% 100%;
	}

	.ahomg-center .xiaoshou>div>span>p:first-child {
		font-size: 33px;
		margin-bottom: 5px;
	}

	.ahomg-center .xiaoshou>div>span:last-child {
		background-image: url(../../assets/6.png);
		margin-left: 20px;
	}

	.span-blu>div>p {
		text-align: left;
	}

	.span-blu>div>p>span {
		display: inline-block;
		width: 4px;
		height: 15px;
		margin-right: 10px;
		vertical-align: middle;
		background-color: #1989FA;
	}

	.daichuli .chuli-dingdan {
		height: 150px;
		display: flex;
		justify-content: space-between;
        
		align-items: center;
	}

	.daichuli .chuli-dingdan>div {
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 33px;
	}

	.daichuli .chuli-dingdan>div>span {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 60px;
		height: 60px;
		border-radius: 50%;
		background-color: #f0f0f0;
		margin-right: 20px;
	}

	.daichuli .chuli-dingdan>div>div span {
		font-size: 14px;
		color: #666;
	}
</style>

<script>
</script>
